import Vue from 'vue'
/*
    Vue.directive是用于定义全局指令的
    参数有两个
    参数1：自定义指令名称
    参数2：自定义指令的配置对象
*/
Vue.directive('draw',{
    bind(el,bindings){
        console.log(bindings.value);
        //创建Canvas对象
        let cvs=document.createElement('canvas')
        //给画布设置宽和高
        cvs.width=bindings.value.width
        cvs.height=bindings.value.height
        //获取上下文对象
        let cxt=cvs.getContext('2d')
        //给画笔绑定onmousedown
        cvs.onmousedown=function(e){
            //获取鼠标点下去的坐标
           cxt.moveTo(e.pageX-this.offsetLeft,e.pageY-this.offsetTop)
           //当鼠标移动时候
           cvs.onmousemove=function(e){
              cxt.lineTo(e.pageX-this.offsetLeft,e.pageY-this.offsetTop)
              cxt.stroke()
           }
           cvs.onmouseup=function(){
             cvs.onmousemove=null
           }
        }
        el.appendChild(cvs)
    }
})